<template>
  <div
    class="share-box es-drager selected"
    :style="{
      top: config.top + 'px',
      left: config.left + 'px',
      width: config.width + 'px',
      height: config.height + 'px',
    }"
  >
    <slot></slot>
    <div
      v-for="(item, index) in dotList"
      :key="index"
      class="es-drager-dot"
      :data-side="item.side"
      :style="{ ...item }"
      @mousedown="onDotMousedown(item, $event)"
      @touchstart.passive="onDotMousedown(item, $event)"
    >
      <slot name="resize" v-bind="{ side: item.side }">
        <div class="es-drager-dot-handle"></div>
      </slot>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {
  getDotList,
  getXY,
  setupMove,
  degToRadian,
  getLength,
  formatData,
  centerToTL,
  getNewStyle,
} from "@/utils";

const props = defineProps({
  config: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const dotList = ref(getDotList());

// methods

/**
 * 缩放
 * @param dotInfo
 * @param e
 */
function onDotMousedown(dotInfo, e) {
  e.stopPropagation();
  // 获取鼠标按下的坐标
  const { clientX, clientY } = getXY(e);
  const downX = clientX;
  const downY = clientY;
  const { width, height, left, top } = props.config;
  const type = dotInfo.side;
  const ratio = 0;
  const minWidth = -Infinity;
  const minHeight = -Infinity;

  // 中心点
  const centerX = left + width / 2;
  const centerY = top + height / 2;

  const rect = {
    width,
    height,
    centerX,
    centerY,
    rotateAngle: 0,
  };

  if (props.boundary) {
    boundaryInfo = getBoundary();
  }

  const onMousemove = (e) => {
    const { clientX, clientY } = getXY(e);
    // 距离
    let deltaX = clientX - downX;
    let deltaY = clientY - downY;

    const alpha = Math.atan2(deltaY, deltaX);
    const deltaL = getLength(deltaX, deltaY);


    const beta = alpha - degToRadian(rect.rotateAngle);
    const deltaW = deltaL * Math.cos(beta);
    const deltaH = deltaL * Math.sin(beta);
    const {
      position: { centerX, centerY },
      size: { width, height },
    } = getNewStyle(
      type,
      { ...rect, rotateAngle: rect.rotateAngle },
      deltaW,
      deltaH,
      ratio,
      minWidth,
      minHeight
    );

    const pData = centerToTL({
      centerX,
      centerY,
      width,
      height,
      angle: 0,
    });

    let d = {
      ...formatData(pData, centerX, centerY),
    };

    props.config.width = d.width;
    props.config.height = d.height;
    props.config.left = d.left;
    props.config.top = d.top;
  };
  setupMove(onMousemove);
}
</script>

<style lang="scss" scoped>
.share-box {
  position: relative;
}
.es-drager-rotate {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -200%);
}

.es-drager-rotate-handle {
  width: 16px;
  height: 16px;
  font-size: 20px;
  color: var(--es-drager-color);
}

.es-drager {
  --es-drager-color: #3a7afe;
  position: absolute;
}

.es-drager:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.es-drager.selected {
  transition: none;
  user-select: none;
}

.es-drager.selected:after {
  display: block;
  outline: 1px dashed var(--es-drager-color);
}

.es-drager.selected .es-drager-dot {
  display: block;
}

.es-drager.border {
  border: 1px solid var(--es-drager-color);
}

.es-drager.disabled {
  opacity: 0.4;
  cursor: not-allowed !important;
}

.es-drager:hover {
  cursor: move;
}

.es-drager-dot {
  // display: none;
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  cursor: se-resize;
  background: var(--es-drager-color);
}

.es-drager-dot[data-side*="right"] {
  transform: translate(50%, -50%);
}

.es-drager-dot[data-side*="bottom"] {
  transform: translate(-50%, 50%);
}

.es-drager-dot[data-side="bottom-right"] {
  transform: translate(50%, 50%);
}

.es-drager-dot-handle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--es-drager-color);
}
</style>
